import { Avatar, Card, message, Popover } from "antd";
import { useModel, history } from '@umijs/max';
import { setApplicationInfo } from '../../utils/authority';
import { useState } from "react";

export default () => {
    const { initialState, setInitialState } = useModel('@@initialState');
    const { Meta } = Card;
    const { currentUser, masterConfig } = initialState;
    const { userEnterprises } = currentUser;
    const [open, setOpen] = useState(false);
    return (
        <div
            style={{
                backgroundColor: 'rgba(0, 0, 0, 0.04)', paddingInline: 0,
                paddingBlock: 0,
                height: '30px',
                lineHeight: '30px',
                padding: '0 20px',
                fontSize: '14px'
            }}
        >
            <Popover open={open} placement="bottom" title={false} content={
                <>
                    <div> {userEnterprises.map(enter => {
                        return <div key={enter.enterpriseId}>
                            <div style={{
                                fontSize: "14px",
                                fontWeight: "bold",
                                padding: "10px 10px 0"
                            }}>{enter.enterpriseName}</div>
                            {enter.applications.map(app => {
                                if (app.applicationType === 1) {
                                    // if (true) {
                                    return <Card
                                        key={app.tenantId}
                                        size='small'
                                        bordered={false}
                                        style={{ margin: "10px" }}
                                    >

                                        <Meta
                                            avatar={<Avatar size={40} src={<img src={`${masterConfig.cdnAddress}/${app.logo}`} alt="avatar" />} />}

                                            description={<div style={{ fontSize: "12px" }}>
                                                <div style={{ fontSize: "14px", color: "black", fontWeight: "bold" }}>{app.customerApplicationName}

                                                    <a key="setting" type="link"
                                                        style={{ marginLeft: "10px", fontSize: "12px" }}
                                                        onClick={() => {
                                                            message.loading("切换中...", 1.5, () => {
                                                                const hoverApp = {
                                                                    enterpriseId: enter.enterpriseId,
                                                                    tenantId: app.tenantId,
                                                                    enterpriseName: enter.enterpriseName,
                                                                    logo: app.logo,
                                                                    appName: app.customerApplicationName
                                                                }
                                                                setApplicationInfo(hoverApp);
                                                                setInitialState({ ...initialState, app: hoverApp });
                                                                setOpen(false);
                                                                history.push(app.defaultRoute);
                                                                message.success("切换成功...")
                                                            });


                                                        }}>切换</a>
                                                </div>
                                                <div>  应用/版本：{app.applicationName}/{app.versionName}</div>

                                            </div>}
                                        />

                                    </Card>
                                }
                                return null;
                            })

                            }
                        </div>
                    })
                    }</div>
                </>

            } onOpenChange={(e) => {
                setOpen(e);
            }} trigger={"click"}>
                <div onClick={() => {
                }}>  {initialState?.app?.enterpriseName}</div>
            </Popover>
        </div>
    );
};
